import React from 'react';
import { Modal, Descriptions, Tag, Image, Button, Space, Typography } from 'antd';
import { DownloadOutlined, CopyOutlined } from '@ant-design/icons';
import moment from 'moment';

const { Text } = Typography;

interface FilePreviewProps {
  visible: boolean;
  file?: SYSTEM.FileUploadModel;
  onCancel: () => void;
}

const FilePreview: React.FC<FilePreviewProps> = ({ visible, file, onCancel }) => {
  if (!file) return null;

  // 文件类型标签颜色映射
  const typeColorMap = {
    image: 'green',
    audio: 'blue',
    video: 'purple',
    document: 'orange',
    other: 'default',
  };

  // 使用类型标签颜色映射
  const usageTypeColorMap = {
    avatar: 'cyan',
    course_cover: 'geekblue',
    banner: 'magenta',
    audio: 'blue',
    video: 'purple',
    document: 'orange',
    other: 'default',
  };

  // 类型映射
  const typeMap = {
    image: '图片',
    audio: '音频',
    video: '视频',
    document: '文档',
    other: '其他',
  };

  // 使用类型映射
  const usageTypeMap = {
    avatar: '头像',
    course_cover: '课程封面',
    banner: '轮播图',
    audio: '音频文件',
    video: '视频文件',
    document: '文档文件',
    other: '其他',
  };

  // 格式化文件大小
  const formatFileSize = (size: number) => {
    if (!size) return '-';
    if (size < 1024) return `${size}B`;
    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)}KB`;
    if (size < 1024 * 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(1)}MB`;
    return `${(size / (1024 * 1024 * 1024)).toFixed(1)}GB`;
  };

  // 处理下载
  const handleDownload = () => {
    const link = document.createElement('a');
    link.href = file.file_url;
    link.download = file.original_name;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  // 处理复制链接
  const handleCopyUrl = () => {
    navigator.clipboard.writeText(file.file_url).then(() => {
      // 这里可以添加成功提示
    });
  };

  // 渲染文件预览内容
  const renderFileContent = () => {
    switch (file.file_type) {
      case 'image':
        return (
          <div style={{ textAlign: 'center', marginBottom: 24 }}>
            <Image
              src={file.file_url}
              alt={file.original_name}
              style={{ maxWidth: '100%', maxHeight: 400 }}
            />
          </div>
        );
      case 'audio':
        return (
          <div style={{ marginBottom: 24 }}>
            <audio controls style={{ width: '100%' }}>
              <source src={file.file_url} />
              您的浏览器不支持音频播放。
            </audio>
          </div>
        );
      case 'video':
        return (
          <div style={{ marginBottom: 24 }}>
            <video controls style={{ width: '100%', maxHeight: 400 }}>
              <source src={file.file_url} />
              您的浏览器不支持视频播放。
            </video>
          </div>
        );
      default:
        return (
          <div style={{ 
            textAlign: 'center', 
            padding: 40,
            background: '#f5f5f5',
            borderRadius: 8,
            marginBottom: 24
          }}>
            <div style={{ fontSize: 48, color: '#ccc', marginBottom: 16 }}>
              📄
            </div>
            <Text type="secondary">
              {file.file_type.toUpperCase()} 文件无法预览，请下载查看
            </Text>
          </div>
        );
    }
  };

  return (
    <Modal
      title={`文件预览 - ${file.original_name}`}
      open={visible}
      onCancel={onCancel}
      footer={
        <Space>
          <Button icon={<CopyOutlined />} onClick={handleCopyUrl}>
            复制链接
          </Button>
          <Button type="primary" icon={<DownloadOutlined />} onClick={handleDownload}>
            下载文件
          </Button>
        </Space>
      }
      width={800}
      destroyOnClose
    >
      {/* 文件预览内容 */}
      {renderFileContent()}

      {/* 文件详细信息 */}
      <Descriptions title="文件信息" column={2} bordered>
        <Descriptions.Item label="文件ID">{file.id}</Descriptions.Item>
        <Descriptions.Item label="原始文件名">{file.original_name}</Descriptions.Item>
        <Descriptions.Item label="存储文件名">{file.file_name}</Descriptions.Item>
        <Descriptions.Item label="文件类型">
          <Tag color={typeColorMap[file.file_type]}>
            {typeMap[file.file_type]}
          </Tag>
        </Descriptions.Item>
        <Descriptions.Item label="使用类型">
          <Tag color={usageTypeColorMap[file.usage_type]}>
            {usageTypeMap[file.usage_type]}
          </Tag>
        </Descriptions.Item>
        <Descriptions.Item label="文件大小">
          {formatFileSize(file.file_size)}
        </Descriptions.Item>
        <Descriptions.Item label="MIME类型">{file.mime_type}</Descriptions.Item>
        <Descriptions.Item label="文件扩展名">{file.file_extension}</Descriptions.Item>
        <Descriptions.Item label="上传者">{file.uploader_name}</Descriptions.Item>
        <Descriptions.Item label="上传者ID">{file.uploader_id}</Descriptions.Item>
        <Descriptions.Item label="上传时间">
          {moment(file.created_at).format('YYYY-MM-DD HH:mm:ss')}
        </Descriptions.Item>
        <Descriptions.Item label="更新时间">
          {moment(file.updated_at).format('YYYY-MM-DD HH:mm:ss')}
        </Descriptions.Item>
        <Descriptions.Item label="文件描述" span={2}>
          {file.description || '无描述'}
        </Descriptions.Item>
        <Descriptions.Item label="文件URL" span={2}>
          <Text copyable style={{ wordBreak: 'break-all' }}>
            {file.file_url}
          </Text>
        </Descriptions.Item>
      </Descriptions>

      {/* 技术信息 */}
      <div style={{ 
        marginTop: 16, 
        padding: 12, 
        background: '#f6ffed', 
        border: '1px solid #b7eb8f',
        borderRadius: 6 
      }}>
        <h4 style={{ margin: '0 0 8px 0', color: '#52c41a' }}>技术信息</h4>
        <ul style={{ margin: 0, paddingLeft: 20, color: '#666' }}>
          <li><strong>存储路径：</strong>{file.file_path}</li>
          <li><strong>文件哈希：</strong>{file.file_hash || '未计算'}</li>
          <li><strong>访问权限：</strong>公开访问</li>
          <li><strong>CDN加速：</strong>已启用</li>
        </ul>
      </div>
    </Modal>
  );
};

export default FilePreview;
